<template>
    <div>
        <h3>Axios的安装</h3>
        <p>npm install @nuxtjs/axios @nuxtjs/proxy --save(yarn add @nuxtjs/axios @nuxtjs/proxy --save)</p>
        
        <h3>配置到nuxt.config.js中</h3>
        <p>
            modules: [
                '@nuxtjs/axios', 
                '@nuxtjs/router'
            ]
        </p>
        <p>引入后在 script 中（method, mounted等等）就能从全局访问到，用法和普通 axios 一致。</p>

        <h3>baseUrl 直接在配置文件中配置：</h3>
        <pre>
            <code>
                export default {
                    modules: [
                        '@nuxtjs/axios',
                        //'@nuxtjs/proxy' 只要添加了依赖也可以不手动引入模块
                    ],
                    axios: {
                        baseURL: 'http://localhost:8080',
                    },
                }
            </code>
        </pre>
        

        <h3>开启代理选项后，baseURL 选项就会失效。如果依然希望在每个请求之前添加固定前缀可以使用 prefix 选项替代。</h3>
        <pre>
            <code>
                {
                    axios: {
                        proxy: true,
                        prefix: '/backend',
                    },
                    proxy: {
                        '/backend': {
                        target: 'http://localhost:8080', // process.env.BACKEND_URL
                        pathRewrite: { '^/backend': '/' },
                        },
                    },
                }
            </code>
        </pre>
        <p>不用导入 axios，因为在 配置文件中导入了，所以可以在 nuxt 上下文中得到，直接使用即可</p>
        <button v-on:click="fetchSomething">查看控制台数据有axios对象打印 </button>

        <h3>axios拦截器</h3>
        <p>在 plugins 文件夹下创建 拦截器的文件 axios-interceptor.js ( 起什么名字都可以！ ）,baseUrl也可以在这个地方设置。完成后在nuxt.config.js里配置下</p>
        <pre>
            <code>
                // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
                plugins: [
                    '~/plugins/axios'
                ],
            </code>
        </pre>
        <button v-on:click="fetchSomething2">使用axios.js的配置，并弹出404的error，并跳转到store页面 </button>
    </div>
   
</template>

<script>
export default {
    name: "axios",
    layout: 'test', //默认的使用default.vue
    //只有在pages目录下的VUE代码才可以使用asyncData，fetch，head三个方法
    fetch ({ app }) {
        console.log("fetch:")
        console.log(app.$axios) //可以拿到axios
    },
    asyncData ({ app }) {
        console.log("asyncData:")
        console.log(app.$axios) //可以拿到axios
    },
    created () {
    
    },

    methods: {
        async fetchSomething() {
            console.log(this.$axios) //可以拿到axios 和asyncData,fetch是同一个对象
        },

        async fetchSomething2() {
            this.$axios.get("xxx");
        }
    },
    
    head() {
        // Set Meta Tags for this Page
    }
}
</script>
